<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>生命周期钩子函数</h1>
        <p>{{age}}</p>
        <input type="text" v-model="age">
        <hr>
        <p>v-model绑定输入框</p>
        <p>性别</p>
        <label for="sex">男</label>
        <input name="sex" type="radio" value="nan" v-model="xingbie">
        <label for="sex">女</label>
        <input name="sex" type="radio" value="nv" v-model="xingbie">
        <label for="sex">保密</label>
        <input name="sex" type="radio" value="none" v-model="xingbie">
        <p>你的性别是{{xingbie}}</p>
        <hr>
        <p>你的爱好是:</p>
        <label>唱</label>
        <input type="checkbox" value="sing" v-model="aihao">
        <label>跳</label>
        <input type="checkbox" value="dance" v-model="aihao">
        <label>rap</label>
        <input type="checkbox" value="rap" v-model="aihao">
        <label>篮球</label>
        <input type="checkbox" value="ball" v-model="aihao">
        <p>{{aihao}}</p>
        <hr>
        <p>你的家乡</p>
        <select name="" id="" v-model="jiaxiang">
            <option value="1">长沙</option>
            <option value="2">株洲</option>
            <option value="3">常德</option>
            <option value="4">永州</option>
            <option value="5">湘潭</option>
        </select>
        <p>你的家乡是:{{jiaxiang}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                age:18,
                xingbie:'none',
                aihao:[],
                jiaxiang:1
            },
            // beforeCreate(){
            //     console.log(this.$data);
            //     console.log(this.$el);
            //     console.log('beforeCreate--1');
            // },
            // // 最早可以发请求
            // created(){
            //     console.log(this.$data);
            //     console.log(this.$el);
            //     console.log('created--2');
            //     this.getData();
            // },
            // beforeMount(){
            //     console.log(this.$data);
            //     console.log(this.$el);
            //     console.log('beforeMount--3');
            // },
            // mounted(){
            //     console.log(this.$data);
            //     console.log(this.$el);
            //     console.log('mounted--4');
            // },
            // beforeUpdate(){
            //     console.log(this.$data);
            //     console.log(this.$el);
            //     console.log('beforeUpdate--5');
            // },
            // updated(){
            //     console.log(this.$data);
            //     console.log(this.$el);
            //     console.log('updated--6');
            // },
            // beforeDestroy(){
            //     console.log(this.$data);
            //     console.log(this.$el);
            //     console.log('beforeDestroy--7');
            // },
            // destroyed(){
            //     console.log(this.$data);
            //     console.log(this.$el);
            //     console.log('destroyed--8');
            // },
            // methods:{
            //     getData(){
            //         console.log('我获取了数据');
            //     }
            // }
        })

    </script>
</body>

</html>